import React, { Component } from 'react'
import Menu from './MenuBar.module.css'
import { withRouter } from 'react-router-dom'
import {
  HomeOutlined,
  InsuranceOutlined,
  UserOutlined,
  SmileOutlined,
  HomeFilled,
  InsuranceFilled,
  SmileFilled,
  SettingFilled
} from '@ant-design/icons';
class MenuBar extends Component {
  constructor(props){
    super(props)
    this.state={
      path:this.props.location.pathname
    }
  }
  jump(path){
    this.props.history.push(path)
    this.setState({path})
  }
  render() {
    return (
      <div className={Menu.menuBar}>
        <div className={Menu.menuItem} onClick={()=>this.jump('/')}>
          { this.state.path !== '/' ? <HomeOutlined className={Menu.padd} />:<HomeFilled className={Menu.padd}/>}
          <div>主页</div>
        </div>
        <div className={Menu.menuItem} onClick={()=>this.jump('/Guarantee')}>
          {this.state.path !== '/Guarantee'?<InsuranceOutlined className={Menu.padd}/>:<InsuranceFilled className={Menu.padd}/>}
          <div>担保抵押</div>
        </div>
        <div className={Menu.menuItem} onClick={()=>this.jump('/Community')}>
          {this.state.path !== '/Community'?<SmileOutlined  className={Menu.padd}/>:<SmileFilled className={Menu.padd}/>}
          <div>社区</div>
        </div>
        <div className={Menu.menuItem} onClick={()=>this.jump('/Mine')}>
          {this.state.path !== '/Mine'?<UserOutlined className={Menu.padd}/>:<SettingFilled className={Menu.padd}/>}
          <div>我的</div>
        </div>
      </div>
    )
  }
}
export default withRouter(MenuBar)